import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:wechat_app/pages/root/root.dart';
import 'package:wechat_app/widgets/appBar/close_bar.dart';

class Login extends StatefulWidget {
  const Login({super.key});

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  // TextEditingController：输入框控制器
  TextEditingController controller = TextEditingController();
  final FocusNode focusNode = FocusNode();
  validLogin() {
    if (controller.text.isEmpty) {
      Fluttertoast.showToast(msg: "请输入手机号", gravity: ToastGravity.CENTER);
      return;
    }

    RegExp reg = RegExp(
        r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$');
    if (!reg.hasMatch(controller.text)) {
      Fluttertoast.showToast(msg: "输入的手机号有误", gravity: ToastGravity.CENTER);
      return;
    }

    Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(builder: (context) => const Root()),
        (route) => false);
  }

  Widget labelText(String text) {
    return Text(
      text,
      style: const TextStyle(color: Color(0xff1A1A1A), fontSize: 16),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        // 键盘弹出等页面是否适应大小
        resizeToAvoidBottomInset: false,
        appBar: CloseBar(),
        // 安卓平台默认点击空白不关闭输入框
        body: GestureDetector(
            // GestureDetector手势识别
            // opaque不透明的，只有自己能命中，deferToChild可以穿透到子控件命中
            behavior: HitTestBehavior.opaque,
            onTap: () {
              // 方式一：FocusScope焦点控制，请求一个新的空焦点
              // FocusScope.of(context).requestFocus(FocusNode());
              // 方式二：为输入框绑定focusNode对象，用focusNode对象主动调用unfocus()方法
              focusNode.unfocus();
              print("点击了空白区域");
            },
            child: Padding(
              padding: const EdgeInsetsDirectional.all(15),
              child: Column(children: [
                Expanded(
                    child: Column(
                  children: [
                    const SizedBox(
                      height: 69 - 18,
                    ),
                    const Align(
                      alignment: Alignment.center,
                      child: Text(
                        "手机号登录",
                        style: TextStyle(
                            color: Color(0xff1A1A1A),
                            fontSize: 21,
                            fontWeight: FontWeight.w600),
                      ),
                    ),
                    const SizedBox(
                      height: 47,
                    ),
                    const SizedBox(
                      height: 37,
                      child: Divider(
                        color: Color(0xffD8D8D8),
                      ),
                    ),
                    Row(
                      children: [
                        SizedBox(
                          width: 72 + 35,
                          child: labelText("国家/地区"),
                        ),
                        Expanded(child: labelText("中国大陆"))
                      ],
                    ),
                    const SizedBox(
                      height: 37,
                      child: Divider(
                        color: Color(0xffD8D8D8),
                      ),
                    ),
                    Row(
                      children: [
                        SizedBox(
                          width: 72 + 35,
                          child: labelText("手机号"),
                        ),
                        const Text(
                          "+86",
                          style:
                              TextStyle(color: Color(0xff737373), fontSize: 16),
                        ),
                        const SizedBox(width: 20),
                        // TextField输入框
                        Expanded(
                            child: TextField(
                                onChanged: (v) {
                                  setState(() {});
                                },
                                controller: controller,
                                autofocus: true,
                                focusNode: focusNode,
                                cursorColor: const Color(0xff07C160),
                                cursorWidth: 2,
                                // keyboardType似乎没效果
                                keyboardType: TextInputType.number,
                                // 格式校验
                                inputFormatters: [
                                  // 长度限制
                                  LengthLimitingTextInputFormatter(11),
                                  // 正则匹配
                                  FilteringTextInputFormatter.allow(
                                      RegExp('[0-9]'))
                                ],
                                decoration: const InputDecoration(
                                    hintText: "请填写手机号码",
                                    hintStyle: TextStyle(
                                        color: Color(0xff737373), fontSize: 16),
                                    border: InputBorder.none))),
                        if (controller.text.isNotEmpty)
                          IconButton(
                              onPressed: () {
                                controller.clear();
                                print(controller.text.isNotEmpty);
                              },
                              icon: const Icon(Icons.close_sharp))
                      ],
                    ),
                    const Divider(
                      color: Color(0xffD8D8D8),
                    )
                  ],
                )),
                Column(
                  children: [
                    const Text(
                      "上述手机号仅用于登录验证",
                      style: TextStyle(color: Color(0xffB3B3B3), fontSize: 13),
                    ),
                    InkWell(
                      child: Container(
                        height: 40,
                        width: 160,
                        alignment: Alignment.center,
                        margin: const EdgeInsets.fromLTRB(0, 20, 0, 40),
                        decoration: const BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(5)),
                            color: Color(0xff07c160)),
                        child: const Text(
                          "同意并继续",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                      onTap: () => validLogin(),
                    )
                  ],
                )
              ]),
            )));
  }
}
